import React, { Component } from 'react'
import '../../assets/css/cate.css'
import { Toast } from 'antd-mobile';
import {ee} from '../../utils/events'
import { getcate,getgoods,cartadd } from '../../request/api.js'
export default class home extends Component {
    constructor() {
        super()
        this.state = {
            catelist: [],
            goods:[],
            showgoods:[],
            input: ''
        }
    }
    componentDidMount() {
        this.catelist()
        
    }
    catelist() {
        getcate().then(res => {
            this.setState({ catelist: res.list })

        })
        
        getgoods({fid:1}).then(res=>{
            this.setState({ goods: res.list},()=>{
                this.color()
            })
            
        })
    }
    dateils(id){
        this.props.history.push('/details/'+id)
    }
    catr(e,id){
        e.stopPropagation()

        if(JSON.parse(sessionStorage.getItem('user'))==null){

            this.props.history.push('/login')
        }else {
            
        let uid=JSON.parse(sessionStorage.getItem('user')).uid
              let a={
           uid,
           type:1,
           goodsid:id,
           num:1
       }

       cartadd(a).then(res=>{
           if(res.code==200){
               Toast.success('添加成功', 1);
           }
       })
        }
     
       
    }
    change(e) {
        this.setState({ input: e.target.value })
    }
    render() {
        return (
            <div className='cate-box'>
               <div className='title'> 
               <i onClick={()=>this.props.history.goBack()}>&lt;</i>
               商品分类</div>
                <div className='search'>
                    <i className='iconfont icon-fangdajing'></i>
                    <span onClick={()=>this.search()}>搜索</span>
                    <input type="text" value={this.state.input} onChange={(e) => this.change(e)}/>
                </div>
                <div className='cate-cont'>
                    <ul className='cate-cont-ul'>
                        {
                            this, this.state.catelist.length !== 0 ? this.state.catelist.map(ele => (
                                <li key={ele.id} onClick={(e) => this.cate(e,ele.id)}>
                                    {ele.catename}
                                </li>
                            )) : ''
                        }
                    </ul>
                    <div className='cont-l'>
                        <div className='cont'>
                            <ul>
                                {
                                    this.state.goods.map(ele=>(
                                         <li key={ele.id} onClick={()=>this.dateils(ele.id)}>
                                    <div className='cont-left'>
                                        <img src={ele.img} alt="" />
                                    </div>
                                    <div className='cont-right'>
                                        <p className='p1'>{ele.goodsname}</p>
                                        <div className='price'>
                                            <div className='price-l'>
                                                <span>{ele.price}</span>
                                                <s>{ele.market_price}</s>
                                                <p>999人已付款，99.8%好评</p>
                                            </div>

                                            <div className='price-r' onClick={(e)=>this.catr(e,ele.id)}>加入购物车</div>
                                        </div>
                                    </div>
                                </li> 
                                    ))
                                }
                              
                            </ul>
                        </div>

                    </div>

                </div>
            </div>
        )
    }
    cate(e,id) {
        // console.log(id);
        let li = document.querySelectorAll('li')
        for (let i = 0; i < li.length; i++) {
            li[i].className = ''
        }
        e.target.className = 'cate'

        getgoods({fid:id}).then(res=>{
            // console.log(res);
            this.setState({ goods: res.list })

        })



    }
    color() {
        let li = document.querySelectorAll('li')
        // console.log(li);
        li[0].className = 'cate'
    }
    search() {
        console.log(this.state.input);
        if(this.state.input==''){
            Toast.fail('请输入', 1)
        }else{
              setTimeout(() => {
            ee.emit('message1', this.state.input) 
        }, 500);
        
        this.props.history.push('/search')
        }
      
     
    }
}
